<template>
  <div class="login">
    <div class="login-content">
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 表单 表单验证rules 属性-->
        <el-form-item label="用户名：" style="color:#ffffff">
          <el-input placeholder="请输入用户名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码：">
          <el-input placeholder="请输入验证码" v-model="form.code">
            <template slot="append">
              <el-button :disabled="disabled" @click="countDown">{{ content }}</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="login-btn" label="">
          <el-button class="login-btn-button" type="primary" round @click="submit">登 陆</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request.js"
import { mapState } from 'vuex'
export default {
  data() {
    return {
      form: {
        name: '',
        password: '',
        code: ''
      },
      content: "获取验证码",
      num: 60,
      disabled: false
    }
  },
  computed: mapState({
    userInfo:(state)=> state.userInfo
  }),
  methods: {
    countDown() {
      // console.log('1')
      
      this.disabled = true;
      
      let timer = setInterval(()=> {
        this.num--;
        this.content = `${this.num}秒重新获取`;
        if(this.num <= 0) {
          this.num = 60;
          this.content = `获取验证码`;
          this.disabled = false;
          clearInterval(timer)
        }
      },1000)
    },
    // 登陆
    submit() {
      // if(!this.form.name || !this.form.)
      console.log(this.userInfo,'----store----')
      request.post('/login',this.form).then(res=> {
        console.log(res,61)
        let params = res.data;
        console.log(params,63)
        // 响应成功，一般后端会返回一个code 为200的状态码
        if(params.code == 200) {
          // 登陆一般要存储用户信息到浏览器当中
          // localStorage.setItem("userInfo",JSON.stringify(params.data))
          this.$store.commit("USERINFO",params.data);
          // this.$store.dispatch("userInfoList")
          this.$router.push({
            path: '/'
          })
        }
      })
      // this.$router.push({
      //   path: '/'
      // })
    }
  }
}
</script>

<style lang="scss">
// scoped 不加的话是全局样式，会污染全局，一定要加
// 加了 scoped 代表只是在当前组件中使用 
.login {
  width: 100%;
  height: 100vh;
  background: url("../../assets/bg.jpeg") no-repeat;
  background-size: cover;
  // scss 的一种写法 & 来代替上一级的class 名字 
  &-content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form {
    padding: 20px;
    // border: 1px solid #000000;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
    text-align: center;
  }
  .login-btn {
    margin-left: -80px;
  }
  .login-btn-button {
    width: 300px;
  }
  // /deep/
  .el-input {
    width: 300px;
  }
  .el-form-item__label {
    color: #ffffff !important;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    // content: "";
  }
}




</style>